<template>
  <div class="main-nr">
    <router-link :to="{path:'/listNR', query:{caricatureId: mainData.caricatureId} }" v-if="isShow!=1">
      <img :src="mainData.url" :alt="mainData.name">
      <div class="down">
        <div class="box1">
          <h3>{{mainData.name}}</h3>
          <span>{{type}}</span>
        </div>
        <div class="box2">
          <span>{{mainData.hua}}</span>
          <div class="read">
            <img src="../assets/public/read.png" alt="read">
            <span>{{heat}}</span>
          </div>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'main-box',
  props: ['mainData'],
  data() {
    return {
      isShow: 1
    }
  },
  computed: {
    heat() {
      let sum = ''
      let heat = this.mainData.heat - 0
      if (heat >= 10000) {
        sum = heat / 10000
        sum = sum + 'w'
        return sum
      }
      sum = this.mainData.heat
      return sum
    },
    type() {
      let type = this.mainData.type
      let str = ''
      if (type == '001') {
        return str = '热血'
      } else if (type == '002') {
        return str = '都市'
      } else if (type == '003') {
        return str = '奇幻'
      } else if (type == '004') {
        return str = '游戏电竞'
      } else if (type == '005') {
        return str = '悬疑灵异'
      } else if (type == '006') {
        return str = '西幻'
      } else if (type == '007') {
        return str = '都市'
      } else if (type == '008') {
        return str = '玄幻'
      } else if (type == '009') {
        return str = '悬疑'
      } else if (type == '010') {
        return str = '历史'
      } else if (type == '011') {
        return str = '武侠仙侠'
      } else if (type == '012') {
        return str = '架空'
      } else if (type == '013') {
        return str = '青春'
      } else if (type == '014') {
        return str = '现代'
      } else if (type == '015') {
        return str = '正能量'
      } else if (type == '016') {
        return str = '科幻'
      }
    }
  },
  mounted() {
    this.isShow = 2
  }
}
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}

@width: 95.2667vw;
@height: 70.4333vw;

a {
  text-decoration: none !important;
  color: #919aa7;
}

.main-nr {
  width: @width;
  height: @height;
  margin: 0 auto;
  margin-top: 2.6667vw;
  margin-bottom: 5.2333vw;

  a {
    width: 100%;
    height: 100%;
    display: block;

    img {
      width: 100%;
      height: 80%;
      border-radius: 1.3333vw;
    }

    .down {
      margin-top: .8vw;

      .box1 {
        display: flex;
        align-items: center;

        h3 {
          max-width: 81%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 4vw;
          height: 8vw;
          line-height: 8vw;
          font-weight: 500;
          color: black;
        }

        span {
          display: block;
          padding: 0 1.2667vw;
          height: 4.5333vw;
          background-color: #f5f5f5;
          color: #9095b2;
          font-size: 3.2vw;
          line-height: 4.5333vw;
          text-align: center;
          margin-left: 1.3333vw;
          border-radius: .8vw;
        }
      }

      .box2 {
        display: flex;
        justify-content: space-between;

        span {
          font-size: 3.7333vw;
          color: #999999;
          margin-top: .8vw;
        }

        .read {
          display: flex;
          align-items: center;
          margin-top: -0.8667vw;

          img {
            width: 4.2667vw;
            height: 4.2667vw;
            margin-top: 1.6667vw;
            margin-right: 1.1333vw;
          }
        }
      }
    }
  }
}
</style>
